<%@ page import="twitter4j.Twitter" %>
<%@ page import="twitter4j.User" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="true" %>
<html>
<head>
	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/document.css" />

	<!-- load Dojo -->
      <!--  script type="text/javascript" src="//localhost:8081/staticresources/javascriptlib/dojo/dojo/dojo.js"></script-->
      <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>          
      <script data-dojo-config="async: true"></script>         

	<script>
	if(typeof(dojo) !== "undefined") {
		console.log("dojo loaded");
	}else{
		console.log("dojo did not loaded");
	}

    </script>

	<!--  script type="text/javascript" src="../resources/scripts/createArticle.js"></script-->
	<script type="text/javascript" src="<c:url value="/resources/scripts/footballblogApiClient.js" />"></script>
	
	<title>Get User Article</title>
</head>
<body class="claro">
<div style="margin-left:25%;margin-right:25%">
<jsp:include page="header.jsp"/>

<h1>
	Get User Articles!  
</h1>

<P>  The time on the server is ${serverTime}. </P>

	<%if(null == session.getAttribute("twitter")){%>
    <a href="../twitter/signin?redirectUrl=/test/getuserarticles"><img src="../resources/images/Sign-in-with-Twitter-darker.png"/></a>
	<%}
	else{%>
	<h1>Welcome ${twitter.screenName} (${twitter.id})</h1>
	<%
		Twitter twitter = (Twitter) session.getAttribute("twitter");
		User twitterUser = twitter.showUser(twitter.getId());
		long id = twitter.getId();
		String name = twitterUser.getName();
		String screenName = twitterUser.getScreenName();
		String picUrl = twitterUser.getProfileImageURL();
		String bigPicUrl = twitterUser.getBiggerProfileImageURL();
		String miniPicUrl = twitterUser.getMiniProfileImageURL();
	%>
		<input id="authorType" value="twitter" type="hidden"/>				
		<input id="authorExternalId" value="<%= id %>" type="hidden"/>			
		<input id="authorName" value="<%= name %>" type="hidden"/>			
		<input id="authorScreenName" value="<%= screenName %>" type="hidden"/>			
		<input id="authorPicUrl" value="<%= picUrl %>" type="hidden"/>			
		<input id="authorBigPicUrl" value="<%= bigPicUrl %>" type="hidden"/>			
		<input id="authorMiniPicUrl" value="<%= miniPicUrl %>" type="hidden"/>			

		<table>
			<tr>
				<td><img src="<%= picUrl %>"/><br><%= name %></td>
			</tr>
		</table>
		<div id="userArticles"></div>
		<script>

			var goToViewUrl = function(articleId){
				window.location = "<%=request.getContextPath()%>/test/viewarticle?articleId=" + articleId;	
			};

			var goToEditUrl = function(articleId){
				window.location = "<%=request.getContextPath()%>/test/updatearticle?articleId=" + articleId;	
			};
		
			require(["footballblog/FootballblogApiClient", "dojo/dom", "dojo/dom-attr", "dojo/on", "dojo/_base/lang"], 
					function(FootballblogApiClient, dom, domattr, on, lang){
				var authorType = domattr.get(dom.byId("authorType"), "value");
				var authorExternalId = domattr.get(dom.byId("authorExternalId"), "value");
				var apiClient = new FootballblogApiClient();
				
				apiClient.getArticlesforAuthor(authorType, authorExternalId, function(articles){
					var userArticlesHtml = "";
					for (var i = 0; i < articles.length; i++) {
					    var article = articles[i];
					    userArticlesHtml += "<table>";
					    userArticlesHtml += "<tr><td><b>Article #:</b> " + (i+1) + "</td></tr>";
					    userArticlesHtml += "<tr><td><b>Article id</b>: " + article.articleId + "</td></tr>";
					    userArticlesHtml += "<tr><td><b>Article Title:</b> " + article.articleTitle + "</td></tr>";
					    userArticlesHtml += "<tr><td><b>Article Creation Date:</b> " + article.createdOn + "</td></tr>";
					    userArticlesHtml += "<tr><td><b>Article Text:</b> " + article.articleText + "</td></tr>";
					    userArticlesHtml += "<tr><td><button type='button' id='view_" + article.articleId + "' + onclick=goToViewUrl('" + article.articleId + "')>View</button>";
					    userArticlesHtml += "<button type='button' id='delete_" + article.articleId + "'>Delete</button>";
					    userArticlesHtml += "<button type='button' id='edit_" + article.articleId + "' + onclick=goToEditUrl('" + article.articleId + "')>Edit</button></td></tr>";				    
					    userArticlesHtml += "</table>";
					    userArticlesHtml += "<hr></hr>";
					    
					    //for (var property in article) {
					        //alert('item ' + i + ': ' + property + '=' + article[property]); 
					    //}
					}
					dom.byId("userArticles").innerHTML = userArticlesHtml;
					
					for (var i = 0; i < articles.length; i++) {
					    var article = articles[i];
						
					    //on(dom.byId("view_"+article.articleId), "click", function(){
					    	//console.log();
							//window.location = "/test/viewarticle?articleId=" + article.articleId;
					    //	goToUrl("/test/viewarticle?articleId="+article.articleId);
						//});

						on(dom.byId("delete_"+article.articleId), "click", lang.hitch(apiClient, apiClient.deleteArticle, article.articleId, function(){
							location.reload();
						}));
						
						//on(dom.byId("edit_"+article.articleId), "click", function(){
						//	window.location = "/test/updatearticle?articleId=" + article.articleId;
						//});
					}
				});		
			});
		</script>		
	<%}%>
</div>
</body>
</html>
